<template>
  <div class="pb-20">
    <div class="block w-full relative px-48">
      <this-map @on-point="onPoint" ref="mapRef" />
    </div>
    <div class="mt-8">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 8 }"
        autocomplete="off"
        @finish="$emit('next', formState)"
      >
        <a-form-item label="地址" name="address">
          <a-input-search
            v-model:value="formState.address"
            placeholder="请输入"
            @search="onSearch"
          />
        </a-form-item>

        <a-form-item label="经度" name="lon" :rules="[{ required: true, message: '请输入经度' }]">
          <a-input placeholder="请输入经度" v-model:value="formState.lon" />
        </a-form-item>

        <a-form-item label="纬度" name="lat" :rules="[{ required: true, message: '请输入纬度' }]">
          <a-input placeholder="请输入纬度" v-model:value="formState.lat" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
          <a-button type="primary" @click="$emit('back')">上一步</a-button>
          <a-button type="primary" html-type="submit" class="ml-8">下一步</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import thisMap from './map.vue';

interface FormState {
  lon: string | null;
  lat: string | null;
  address: string;
}
export default defineComponent({
  components: { thisMap },
  setup(props, { emit }) {
    const mapRef = ref();
    const formState = ref<FormState>({
      lon: null,
      lat: null,
      address: '',
    });

    function onPoint(p) {
      formState.value.lon = '' + p.lng;
      formState.value.lat = '' + p.lat;
      if (p.address) {
        formState.value.address = p.address;
      }
    }

    function onSearch(keyword) {
      mapRef.value.search(keyword);
    }

    function setForm({ lon, lat, address }) {
      formState.value = {
        lon,
        lat,
        address,
      };
      mapRef.value.search(address);
    }

    return {
      formState,
      onPoint,
      onSearch,
      mapRef,
      setForm,
    };
  },
});
</script>
  
  